<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="级别" :label-width="formLabelWidth" prop="level">
        <el-input-number
            v-model="form.level"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
        <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="升级条件" :label-width="formLabelWidth" prop="upConditions">
        <fortress-radio-group
            v-model="form.upConditions"
            :dictList="MemberUpConditionsList"
        >
        </fortress-radio-group>
      </el-form-item>
      <el-form-item label="订单总额" :label-width="formLabelWidth" prop="orderTotal" v-if="form.upConditions==1">
        <el-input-number
            v-model="form.orderTotal"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="订单次数" :label-width="formLabelWidth" prop="orderCount" v-if="form.upConditions==2">
        <el-input-number
            v-model="form.orderCount"
        ></el-input-number>
      </el-form-item>
      <el-form-item @click.native="dialogTableVisible = true" label="指定商品" :label-width="formLabelWidth"
                    prop="goodsId" v-if="form.upConditions==3">
        <el-input
            @click.native="dialogTableVisible = true"
            v-model="form.goodsName"
            autocomplete="off"
            placeholder="请输入指定商品"
        ></el-input>
      </el-form-item>
      <el-form-item label="折扣" :label-width="formLabelWidth" prop="discount">
        <el-input
            v-model="form.discount"
            autocomplete="off"
            placeholder="请输入折扣"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
      <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
    </div>
    <el-dialog title="选择商品" :visible.sync="dialogTableVisible" append-to-body>

      <el-row style="margin-bottom: 7px">
        <el-form
            :inline="true"
            :model="queryForm"
            @submit.native.prevent
            @keyup.enter.native="queryList"
        >
          <el-form-item>
            <el-input
                prefix-icon="el-icon-search"
                v-model="queryForm.name"
                autocomplete="off"
                placeholder="请输入商品名称"
                clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                size="medium"
                icon="el-icon-search"
                @click="queryList({ current: 1 })"
            >查询
            </el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                size="medium"
                icon="el-icon-refresh-left"
                @click="resetQueryForm"
            >重置
            </el-button
            >
          </el-form-item>
        </el-form>
        <div style="float: right; padding-right: 17px">
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <i
                class="el-icon-refresh"
                style="margin-right: 10px; cursor: pointer"
                @click="refresh"
            ></i>
          </el-tooltip>
        </div>
      </el-row>

      <el-table :data="gridData">
        <el-table-column property="name" label="商品名称" width="460"></el-table-column>
        <el-table-column
            label="价格"
            :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <p class="price">
              <span>￥{{ scope.row.marketPrice }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column
            prop="type"
            label="类型"
            :show-overflow-tooltip="true"
            :formatter="typeFmt"
            width="120"
        ></el-table-column>
        <el-table-column
            prop="total"
            label="库存"
            :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
            prop="remark"
            label="备注"
            :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" min-width="100">
          <template slot-scope="scope">
            <el-button
                icon="iconfont"
                plain
                type="primary"
                @click="handleAddGoods(scope.row)"
            >选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          :total="page.total"
          :current-page="page.current"
          :page-size="page.size"
          @refreshData="queryList"
      ></pagination>
    </el-dialog>

  </el-dialog>
</template>
<script>
import {memberlevelInfo, memberlevelSave, memberlevelEdit} from "@/api/member/memberlevel.js";
import FortressPagination from "@/components/fortress-pagination.vue";

import {enumList,} from "@/api/public.api.js";
import * as ftVal from "@/common/fortressValidator.js";
import {
  goodsPage,
} from "@/api/goods/goods.js";

export default {
  data() {
    return {
      displayGoodsName: "",
      gridData: [],
      queryForm: {
        name: "",
      },
      page: {
        current: 1,
        size: 10,
        total: 0,
      },
      dialogTableVisible: false,
      visible: false,
      form: {
        level: "",
        name: "",
        upConditions: "",
        orderTotal: "",
        orderCount: "",
        goodsId: "",
        goodsName: "",
        discount:"",
      },
      formLabelWidth: "120px",
      rules: {
        level: [
          {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        name: [
          {required: true, message: "请输入名称", trigger: "blur"},
        ],
        upConditions: [
          {required: true, message: "请输入升级条件", trigger: "blur"},
        ],
        orderTotal: [
          {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
        orderCount: [
          {validator: ftVal.validatePInteger, trigger: "blur"},
        ],
      },
      MemberUpConditionsList: [],
      YesNoList: [],
    };
  },
  components: {
    pagination: FortressPagination,
  },
  created() {
  },
  methods: {
    handleAddGoods(goods) {
      this.form.goodsName = goods.name
      this.form.goodsId = goods.id
      this.dialogTableVisible=false
    },
    refresh() {
      this.gridData = [];
      this.queryList({current: 1});
    },
    resetQueryForm() {
      this.queryForm = {
        name: "",
        categoryId: "",
      };
    },
    typeFmt(row) {
      let name = "";
      if (this.GoodsType_goodsList) {
        this.GoodsType_goodsList.forEach((item) => {
          if (item.code == row.type) {
            name = item.name;
          }
        });
      }
      return name;
    },
    queryEnumList() {
      this.MemberUpConditionsList = [];
      enumList("MemberUpConditions", "").then((resp) => {
        if (resp.code == 0) {
          this.MemberUpConditionsList = resp.data;
        }
      });
      this.GoodsType_goodsList = [];
      enumList("GoodsType", "goods").then((resp) => {
        if (resp.code == 0) {
          this.GoodsType_goodsList = resp.data;
        }
      });
      this.YesNoList = [];
      enumList("YesNo", "").then((resp) => {
        if (resp.code == 0) {
          this.YesNoList = resp.data;
        }
      });
    },
    queryList(page) {
      if (page) {
        this.page.current = page.current ? page.current : this.page.current;
        this.page.size = page.size ? page.size : this.page.size;
      }
      this.queryForm.current = this.page.current;
      this.queryForm.size = this.page.size;
      goodsPage(this.queryForm).then((resp) => {
        if (resp.code == 0) {
          this.gridData = resp.data.records;
          this.page.total = resp.data.total;
          //查询页大于总页数，重新查询
          let cu =
              this.page.total % this.page.size == 0
                  ? parseInt(this.page.total / this.page.size)
                  : parseInt(this.page.total / this.page.size + 1);
          if (cu > 0 && this.page.current > cu) {
            this.queryList({current: cu});
          }
        } else {
          this.$msg({
            message: resp.msg,
            type: "error",
          });
        }
      });
    },
    init(id) {
      this.resetForm();
      this.resetQueryForm();
      this.queryEnumList();
      this.queryList();
      //修改
      if (id) {
        memberlevelInfo(id).then((resp) => {
          if (resp.code == 0) {
            this.$nextTick(() => {
              this.form = {
                ...this.form,
                ...resp.data,
              };
            });
          } else {
            this.$msg({
              message: resp.msg,
              type: "error",
            });
          }
        });
      }
      this.visible = true;
    },
    //提交表单数据
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //修改
          if (this.form.id) {
            memberlevelEdit(this.form).then((resp) => {
              if (resp.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("refreshData");
                this.visible = false;
              } else {
                this.$msg({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
            //新增
          } else {
            memberlevelSave(this.form).then((resp) => {
              if (resp.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$emit("refreshData");
                this.visible = false;
              } else {
                this.$msg({
                  message: resp.msg,
                  type: "error",
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.form = {
        level: "",
        name: "",
        upConditions: "",
        orderTotal: "",
        orderCount: "",
        goodsId: "",
        goodsName: "",
        discount:"",
      };
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          this.$refs["form"].resetFields();
        }
      });
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 7px;
  overflow: hidden;
  overflow-y: auto;
  font-weight: normal;
}
</style>
